<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - 课题列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <style>
        td{
            text-align: center;
        }

        th{
            text-align: center;
        }

        .form-group{
            margin-top: 10px;
            overflow: hidden;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div id="loading" class="ibox-content">
        <div class="spiner-example">
            <div class="sk-spinner sk-spinner-wave">
                <div class="sk-rect1"></div>
                <div class="sk-rect2"></div>
                <div class="sk-rect3"></div>
                <div class="sk-rect4"></div>
                <div class="sk-rect5"></div>
            </div>
        </div>
        <p id="jindu" style="text-align: center;">数据加载中...</p>
    </div>



    <div class="row">
        <table class="table table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>老师信息</th>
                <th>参与学生id</th>
                <th>课题名称</th>
                <th>课题人数</th>
                <th>课题详情</th>
                <th>课题要求</th>
                <th>上传时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="table">
            <!--<tr>-->
                <!--<td>Tanmay</td>-->
                <!--<td>Bangalore</td>-->
                <!--<td>560001</td>-->
            <!--</tr>-->
            </tbody>
        </table>
    </div>
</div>


<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>
<!-- jqGrid -->
<script src="js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
<script src="js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
<script src="js/plugins/toastr/toastr.min.js"></script>


<script src="js/zhangyue5.4.js"></script>

</body>
<script>
    ZY.Dashuju2({
        url:'admin',
        step:10,
        data:{
            method:'keti_list'
        },
        start:function(){
            console.log('start')
        },
        error:function(e){
            console.log(e);
        },
        callback:function(data){
            document.getElementById('loading').style.display='none';
            var html=[];
            for(var i=0;i<data.length;i++){
                var obj=data[i];
                html.push(gethtml(obj));
            }
//            document.getElementById('table').innerHTML=html.join('');
            $("#table").append(html.join(''));

        },
        jindu:function(jd,all){
            document.getElementById('jindu').innerHTML="加载中："+jd+'/'+all;
        }
    });


    var gethtml=function(obj){
//        let nr=JSON.parse(obj.neirong);
        let button;
        if(obj.status==1){
            button=`<button data-for="${obj.id}" class="btn btn-success" >通过</button><button data-for="${obj.id}" class="btn btn-danger" style="margin-left: 10px" >拒绝</button>`;
        }
        if(obj.status==2){
            button='';
        }
        if(obj.status==3){
            button=`<button data-for="${obj.id}" class="btn btn-success" >通过</button>`;
        }
        return `
                  <tr data-for="${obj.id}">
                     <td>${obj.id}</td>
                     <td>姓名:${obj.tname}<br>ID:${obj.id}<br>手机号:${obj.tphone}</td>
                     <td>${obj.xid}</td>
                     <td>${obj.mingcheng}</td>
                     <td>${obj.renshu}</td>
                     <td>${obj.xiangqing}</td>
                     <td>${obj.yaoqiu}</td>
                     <td>${obj.addtime}</td>
                     <td>${button}</td>
                  </tr>
                `
    };

    document.getElementById('table').addEventListener('click',function(e){
        if(e.target && e.target.nodeName=="BUTTON") {
            let obj = e.target;
            let id=obj.dataset.for;
            shuju.set('id',id);
            shuju.set('status',obj.innerHTML=='通过'?2:3);
            shuju.set('method','keti_caozuo');
            shuju.getshuju('admin',{
                success:function(data){
                    if(data.code==200){
                        if(obj.innerHTML=='拒绝'){
                            //如果是通过就动，拒绝就不动
                            obj.parentNode.innerHTML=`<button data-for="${id}" class="btn btn-success" >通过</button>`;
                        }else{
                            obj.parentNode.innerHTML="";
                        }
                        toastr.success('操作成功');
                    }else{
                        toastr.error('操作失败');
                    }
                },
                error:function(e){
                    toastr.error('操作失败');
                }
            })
        }
    })
</script>

</html>